
import React, { Component } from "react";
import styles from './viewCharat.css'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";
import { Divider, Typography, Card  } from 'antd';
const mytextStyle={
  color:"#333",                //文字颜色
  fontStyle:"normal",         //italic斜体  oblique倾斜
  fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
  // fontFamily:"sans-serif",   //字体系列
  fontSize:12,                //字体大小
};
const { Title } = Typography;
const colors = [    
'#63b2ee',
'#76da91',
'#f8cb7f',
'#f89588',
'#7cd6cf',];

var cost = [2,3,3,1,1,4];//本期比上期（大于1按1处理）
var dataCost = [10.01,200,200];//真是的金额
var totalCost = [ 5,5, 5, 5, 5, 5];//比例综合
var visits = [5, 5, 5, 5, 5, 5];//本期占总的百分比*100
var grade = ['清洁空气天数','MP2.5达标指数','污染雾霾天数', 'CO污染指数比', 'SO2污染指数占比', 'PO指数比'];
var data = {
    grade: grade,
    cost: cost,
    totalCost: totalCost,
    visits: visits,
    dataCost:dataCost
};
export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  getOption(){
    return {
      title: {
        text: ''
      },
      colors:['#f376e0','#02CBF9'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        trigger:'item',
        left:'center'
      },
      grid: {
        left: '2%',
        right: '9%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        name:'亿元',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        name:'年份',
        data: ['2018','2019','2020','2021','2022']
      },
      series: [
        {
          name: '收入',
          type: 'bar',
          itemStyle: {
            normal: {
                //这里是颜色
                color: '#FFA100'
            }
          },
          data: [ 5919, 6321, 6925, 7102, 7005 ]
        },
        {
          name: '支出',
          type: 'bar',
          itemStyle: {
            normal: {
                //这里是颜色
                color: '#00A3E0'
            }
          },
          data: [ 2531, 2847, 2716, 2709, 2701 ]
        }
      ]
    }
  }

  getOption2(){
    return {
        color: colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {},
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    '投资金额' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')+'亿元'
                  );
                }
              }
            },
            // prettier-ignore
            data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7', '2022-8', '2022-9', '2022-10', '2022-11', '2022-12']
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    '投资金额' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')+'亿元'
                  );
                }
              }
            },
            // prettier-ignore
            data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9', '2021-10', '2021-11', '2021-12']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name:'亿元'
          }
        ],
        series: [
          {
            name: '基础建设投资金额(2021)',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              15.6, 25.9, 19.0, 26.4, 28.7, 70.7, 75.6, 22.2, 48.7, 38.8, 36.0, 29.3
            ]
          },
          {
            name: '基础建设投资金额(2022)',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              23.9, 35.9, 51.1, 38.7, 48.3, 69.2, 31.6, 46.6, 55.4, 25.4, 30.3, 25.7
            ]
          }
        ]
   };
  }

  getOption3(){
    return {
        color:[    
        '#63b2ee',
        '#76da91',
        '#f8cb7f',
        '#f89588',
        '#7cd6cf',],
        title: {
            text: '',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
          },
          yAxis: {
            type: 'value',
            name:'指数(万元)',
            axisLabel: {
              formatter: '{value}'
            },
            axisPointer: {
              snap: true
            }
          },
          visualMap: {
            show: false,
            dimension: 0,
            pieces: [
              {
                lte: 6,
                color: 'green'
              },
              {
                gt: 6,
                lte: 8,
                color: 'red'
              },
              {
                gt: 8,
                lte: 14,
                color: 'green'
              },
              {
                gt: 14,
                lte: 17,
                color: 'red'
              },
              {
                gt: 17,
                color: 'green'
              }
            ]
          },
          series: [
            {
              name: '恒生指数',
              type: 'line',
              smooth: true,
              // prettier-ignore
              data: [300, 280, 250, 260, 270, 310, 350, 500, 430, 390, 380, 490, 400, 510, 680, 550, 250, 280, 300, 420],
              markArea: {
                itemStyle: {
                  color: 'rgba(255, 173, 177, 0.4)'
                },
                data: [
                  [
                    {
                      name: '降盘',
                      xAxis: '07:30'
                    },
                    {
                      xAxis: '10:00'
                    }
                  ],
                  [
                    {
                      name: '涨盘',
                      xAxis: '17:30'
                    },
                    {
                      xAxis: '21:15'
                    }
                  ]
                ]
              }
            }
        ]
   };
  }

  getOption4(){
    return {
      color:[    
      '#63b2ee',
      '#76da91',
      '#f8cb7f',
      '#f89588',
      '#7cd6cf'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              var tar = params[1];
              return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value+ '亿元';
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            splitLine: { show: false },
            data: ['总规模', '第一产业', '第二产业', '第三产业', '高新技术', '精密制造']
          },
          yAxis: {
            type: 'value',
            name:'产值(亿元)'
          },
          series: [
            {
              name: 'Placeholder',
              type: 'bar',
              stack: 'Total',
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent'
              },
              emphasis: {
                itemStyle: {
                  borderColor: 'transparent',
                  color: 'transparent'
                }
              },
              data: [0, 1700, 1400, 1200, 300, 0]
            },
            {
              name: '产业产值',
              type: 'bar',
              barWidth:36,
              stack: 'Total',
              label: {
                show: true,
                position: 'inside'
              },
              data: [2902, 1021, 659, 520, 323, 379]
            }
        ]
   };
  }

  getOption5(){
    return{
          tooltip: {
            trigger: 'item'
          },
          color:[    
          '#63b2ee',
          '#76da91',
          '#f8cb7f',
          '#f89588',
          '#7cd6cf'],
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '高新技术产业产值',
              type: 'pie',
              radius: ['30%', '40%'],
              label:{
                formatter:function(data){
                  return `${data.name} ${data.value}亿元 
                    占比${data.percent.toFixed(1)}%`
                }    
              },
              data: [
                { value: 1048, name: '软件开发研发' },
                { value: 735, name: '精密机械制造' },
                { value: 580, name: '光伏发电电路板制造' },
                { value: 484, name: '腐蚀芯片制造' },
                { value: 300, name: '互联网+科技金融' }
              ]
            }
          ]
    }
  }

  getOption6(){
    return {
      legend: {},
      tooltip: {},
      color:[    
        '#9192ab',
        '#7898e1',
        '#63b2ee',
        '#eddd86',
        '#76da91'],
      dataset: {
        source: [
          ['product', '2018', '2019', '2020', '2021','2022'],
          ['人口流入', 41.1, 30.4, 65.1, 53.3, 71.3],
          ['人口迁出', 56.5, 32.1, 65.7, 53.1, 39.2],
          ['常驻人口增长率', 2.1, 7.2, 9.5, 6.4, 3.3]
        ]
      },
      xAxis: [
        { type: 'category', gridIndex: 0 },
        { type: 'category', gridIndex: 1 }
      ],
      yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
      grid: [{ bottom: '55%' }, { top: '55%' }],
      series: [
        // These series are in the first grid.
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        // These series are in the second grid.
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
      ]
    };
  }

  onChartClick(param,echarts){
    console.log(param)
  }  

  onChartLegendselectchanged(param,echarts){
    console.log(param)
  }
  componentWillReceiveProps(nextProps){
  }
  componentWillMount(){
  }
  componentDidMount(){

  }

  componentDidUpdate() {
    
  }  

  render() {
    const {} = this.state;
    let onEvents={
      'click': this.onChartClick.bind(this),
      'legendselectchanged': this.onChartLegendselectchanged.bind(this)
    }
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />        
          <div style={{margin:20, textAlign:'center'}}>
              <div style={{    
                width: 1640,
                display: 'grid',
                paddingTop:35,
                paddingLeft:9,
                background:'#efefef',
                gridTemplateColumns: 'repeat(3,30%)',
                gridTemplateRows: 'repeat(2,588px)',
                gridColumnGap: 50, 
                background:'#fff',
                gridRowGap: 26 }}>
              <div>
                <Card style={{margin:20,width:520,background:'#fff'}} title='近5年财政收入支出金额'>
                  <ReactEcharts
                        option={this.getOption()} 
                        notMerge={true}
                        lazyUpdate={true}
                        onEvents={onEvents}
                        style={{width:500,height:430}}
                    />
                </Card>
              </div>
              <div>
                <Card style={{margin:20,width:520,background:'#fff'}} title='近两年基础设施建设投资金额趋势图'>
                  <ReactEcharts
                      option={this.getOption2()} 
                      notMerge={true}
                      lazyUpdate={true}
                      onEvents={onEvents}
                      style={{width:500,height:430}}
                  />
                  </Card>
              </div>
              <div>
                  <Card style={{margin:20,width:520,background:'#fff'}} title='2022年企业恒生指数趋势涨降盘'>
                    <ReactEcharts
                        option={this.getOption3()} 
                        notMerge={true}
                        lazyUpdate={true}
                        onEvents={onEvents}
                        style={{width:500,height:430}}
                    />
                  </Card>
              </div>
              <div>
              <Card style={{margin:20,width:520,background:'#fff'}} title='各工业产值额'>
                <ReactEcharts
                      option={this.getOption4()} 
                      notMerge={true}
                      lazyUpdate={true}
                      onEvents={onEvents}
                      style={{width:500,height:430}}
                  />                
              </Card>
              </div>
              <div>
                  <Card style={{margin:20,width:520,background:'#fff'}} title='2022年高新技术及精密制造产业产值'>
                    <ReactEcharts
                        option={this.getOption5()} 
                        notMerge={true}
                        lazyUpdate={true}
                        onEvents={onEvents}
                        style={{width:500,height:430}}
                    />
                  </Card>
              </div>
              <div>
                  <Card style={{margin:20,width:520,background:'#fff'}} title='2022城市人口净流入流出及增长率'>
                    <ReactEcharts
                        option={this.getOption6()} 
                        notMerge={true}
                        lazyUpdate={true}
                        onEvents={onEvents}
                        style={{width:500,height:430}}
                    />
                  </Card>
              </div>                                             
            </div>        
        </div>
      </>  
    )
    }
}
